<template>
	<view class="zh-storage-goods">
		<view class="content">
			<view class="tabs">
				<u-tabs width="400" :titles="['全部', '待上架', '已上架']" position="fixedTop" @click="clickTab"></u-tabs>
			</view>
			<view class="sum-list" v-if="goodsData.query.status ==  GoodsUpShelves.yes">
				<text>已上架：</text>
				<text class="font-FF661B">{{ goodsData.sumList && goodsData.sumList.onTheShelf }}</text>
				<text>吨</text>
			</view>
			<view class="sum-list" v-if="goodsData.query.status ==  GoodsUpShelves.no">
				<text>待上架:</text>
				<text class="font-FF661B">{{ goodsData.sumList && goodsData.sumList.notOnTheShelf }}</text>
				<text>吨</text>
			</view>
			<view class="sum-list" v-if="goodsData.query.status == ''">
				<text>已上架：</text>
				<text class="font-FF661B">{{ goodsData.sumList && goodsData.sumList.onTheShelf }}</text>
				<text>吨，待上架:</text>
				<text class="font-FF661B">{{ goodsData.sumList && goodsData.sumList.notOnTheShelf }}</text>
				<text>吨</text>
			</view>
			<view class="section" v-for="(item, index) in goodsData.list" :key="index" @click="navigateTo('/pages/storage/goods/detail?spbhid=' + item.spbhid + '&spckid=' + item.spckid + '&spcwid=' + item.spcwid)">
				<view class="display-flex">
					<u-checkbox fontSize="26" :sizePercent="0.9" :checked="item.checked" color="#1769ff" @change="selectData($event, item)"></u-checkbox>
					<view class="flex title">
						<view class="display-flex justify-between font-26">
							<view class="left">
								<text class="font-302D2D">{{ item.spzs }}</text>
								<text :class="['tags-right',GoodsUpShelves.yes === item.status?'shelve':'no-shelve']">{{GoodsUpShelves.yes === item.status?"已上架":"待上架"}}</text>
							</view>
							<view class="right font-28">
								<text class="font-302D2D">¥{{ item.price }}/吨</text>
							</view>
						</view>
						<view class="display-flex font-24 mt-30">
							<view class="flex">
								<text class="font-999">纱支：</text>
								<text class="font-302D2D">{{ item.wpggA }}</text>
							</view>
							<view class="flex">
								<text class="font-999">品牌：</text>
								<text class="font-302D2D">{{ item.spcd }}</text>
							</view>
						</view>
						<view class="display-flex font-24 mt-20">
							<view class="flex">
								<text class="font-999">批号：</text>
								<text class="font-302D2D">{{ item.spbh }}</text>
							</view>
							<view class="flex">
								<text class="font-999">柜号：</text>
								<text class="font-302D2D">{{ item.spgh }}</text>
							</view>
						</view>
						<view class="font-24 mt-20">
							<text class="font-999">待上架件数/重量：</text>
							<text class="font-302D2D">{{item.staySpjs }}件/{{ item.staySpsl }}吨</text>
						</view>
						<view class="font-24 mt-20">
							<text class="font-999">已上架件数/重量：</text>
							<text class="font-302D2D" >{{ item.upShelvesNum}}件/{{ item.upShelvesWeight }}吨</text>
						</view>
						<view class="display-flex justify-between align-center footer">
							<view class="font-22 font-999 flex">
								<text>{{ item.updateTime?util.getDate(item.updateTime):"" }}</text>
								<text class="ml-30">{{ item.sheng + item.shi }}</text>
								<text class="ml-30">{{ item.spckmc }}</text>
							</view>
							<button :class="[GoodsUpShelves.yes === item.status?'down-btn':'up-btn']" @click.stop="upShelve(item)">{{GoodsUpShelves.yes === item.status?"下架":"上架"}}</button>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="load-more">
			<u-load-more ref="loadMoreRef"></u-load-more>
		</view>
		<view class="display-flex justify-between align-center bottom-fixed">
			<view class="flex">
				<u-checkbox color="#1769ff" name="全选" fontSize="26" :sizePercent="0.9" :checked="allChecked" @change="selectAll($event)"></u-checkbox>
			</view>
			<view class="display-flex align-center">
				<button class="down-all-btn" @click="downBatchShelve"  v-if="goodsData.query.status == '' || goodsData.query.status ==  GoodsUpShelves.yes">下架</button>
				<button class="up-all-btn" @click="upBatchShelve"  v-if="goodsData.query.status == '' || goodsData.query.status ==  GoodsUpShelves.no">上架</button>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
	import { goods } from '@/api'
	import { useAuthStore } from '@/store/auth'
	import { tip, util } from '@/utils'
	import type { GoodsData } from '@/@type/goods'
	import { onLoad, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app';
	import { GoodsUpShelves } from '@/enum/goods'
	import { Digit } from '@/enum/digit'
	
	const allChecked = ref(false)
	const loadMoreRef = ref()
	const type = ref('')
	const authStore = useAuthStore()
	const user = authStore.getUser()
	const goodsData: any = reactive({
		query:{
			status:'',
			khmc:user.shopName,
			noLoading:false
		},
		params:{
			pageNum:1,
			pageSize:10,
			reasonable:false,
		},
		upBatchShelveQuery: {
			alreadyExistObjs:[],
			doesNotExistObjs:[],
		},
		upBatchShelveParams: {
			status:''
		},
		list:[],
		sumList:{
			notOnTheShelf:'',
			onTheShelf:''
		},
		selection:[],
		total:0
	})
	
	onLoad((options) => {
		type.value = options.type?options.type:''
		goodsList()
	})
	
	uni.$on('goodsSave', (res:any) => {
		refresh()
	})
	
	const goodsList = (cb?:Function) => {
		goods.getStorageGoodsList(goodsData.query, goodsData.params).then((res:any) => {
			cb && cb()
			res.rows.map((item:any) => {
				item.checked = false
				item.price = item.price?item.price:0
			})
			goodsData.list = [...goodsData.list,...res.rows]
			goodsData.sumList = res.sumList && res.sumList.hasOwnProperty('notOnTheShelf')?res.sumList:{notOnTheShelf:0.000000, onTheShelf:0.000000}
			goodsData.total = res.total
		})
	}
	
	const batchUpShelves = (status: string) => {
		goodsData.upBatchShelveParams.status = status
		goods.setbatchUpShelves(goodsData.upBatchShelveQuery, goodsData.upBatchShelveParams).then((res: any) => {
			if(status ===  GoodsUpShelves.no) {
				tip.showToast('下架成功！')
			} else {
				tip.showToast('上架成功！')
			}
			refresh()
		})
	}
	
	const downBatchShelve = () => {
		const selection = goodsData.selection
		if(selection.length === 0) return tip.showToast('请先选择需要下架货物！')
		for(let i in selection) {
			if(selection[i].status === '0') return tip.showToast('批量下架不能包含已下架的货物！')
		}
		
		goodsData.upBatchShelveQuery = {
		 	alreadyExistObjs:[],
		 	doesNotExistObjs:[]
		 }
		selection.forEach((data:any) => {
		  //已生成上架信息
		  if(data.noListingInformationGenerated === '0'){
			data.upShelvesNum = 0;
			data.upShelvesWeight = 0;
			goodsData.upBatchShelveQuery.alreadyExistObjs.push(data)
		  }else{
			//未生成上架信息
			let item = {
				spbhid:data.spbhid,
				spckid:data.spckid,
				spcwid:data.spcwid,
				upShelvesNum:0,
				upShelvesWeight:0,
				price:0,
				startingWeight:0,
			}
			goodsData.upBatchShelveQuery.doesNotExistObjs.push(item)
		  }
		})
		batchUpShelves(GoodsUpShelves.no)
		
	}
	
	const upBatchShelve = () => {
		const selection = goodsData.selection
		if(selection.length === 0) return tip.showToast('请先选择需要上架货物！')
		
		for(let i in selection) {
			if(selection[i].status === '1') return tip.showToast('批量上架不能包含已上架的货物！')
		}
		 goodsData.upBatchShelveQuery = {
		 	alreadyExistObjs:[],
		 	doesNotExistObjs:[]
		 }
		selection.forEach((data:any) => {
		  //已生成上架信息
		  if(data.noListingInformationGenerated === '0'){
			data.upShelvesNum = data.spjs;
			data.upShelvesWeight = data.spsl;
			goodsData.upBatchShelveQuery.alreadyExistObjs.push(data)
		  }else{
			//未生成上架信息
			let item = {
				spbhid:data.spbhid,
				spckid:data.spckid,
				spcwid:data.spcwid,
				upShelvesNum:data.spjs,
				upShelvesWeight:data.spsl,
				price:0,
				startingWeight:0,
			}
			goodsData.upBatchShelveQuery.doesNotExistObjs.push(item)
		  }
		})
		batchUpShelves(GoodsUpShelves.yes)
	}
	
	const selectData = (value:any, item:any) => {
		if(value.length > 0) {
			goodsData.selection.push(item)
		} else {
			const selection = goodsData.selection
			for(let i in selection) {
				if(JSON.stringify(selection[i]) == JSON.stringify(item)) {
					goodsData.selection.splice(i, 1)
				}
			}
		}
	}
	
	const selectAll = (value:any) => {
		const selections = goodsData.list
		if(selections && selections.length === 0) return tip.showToast('没有数据！')
		if(selections.length > 30) return tip.showToast('最多只能批量操作30条')
		
		if(value.length > 0) {
			selections.map((item:any) => item.checked = true)
			allChecked.value = true
			goodsData.selection = selections
		} else {
			selections.map((item:any) => item.checked = false)
			allChecked.value = false
			goodsData.selection = []
		}
		
	}
	
	const clickTab  = (index:number) => {
		goodsData.query.status = index === 1?GoodsUpShelves.no:index === 2?GoodsUpShelves.yes:""
		refresh()
	}
	
	const upShelve = (data:any) => {
		
		const q = JSON.parse(JSON.stringify(data))
		if(q.status ===  GoodsUpShelves.no) {
			q.upShelvesNum = q.spjs
			q.upShelvesWeight = q.spsl
			q.status =  GoodsUpShelves.yes
			shelve('上架成功！',q)
		} else if (q.status ===  GoodsUpShelves.yes) {
			q.upShelvesNum = 0
			q.upShelvesWeight = 0
			q.status =  GoodsUpShelves.no
			shelve('下架成功！',q)
		}
	}

	
	const shelve = (msg:string, data: any) => {
		goods.setUpShelves(data).then((res:any) => {
			tip.showToast(msg)
			refresh()
		})
	}
	
	onReachBottom(() => {
		if(goodsData.params.pageNum * goodsData.params.pageSize > goodsData.total) return loadMoreRef.value.changeStatusNoMore()
		goodsData.params.pageNum++
		loadMoreRef.value.changeStatusLoading()
		setTimeout(() => {
			goodsData.query.noLoading = true
			goodsList(() => {
				loadMoreRef.value.changeStatusNoLoading()
				if(goodsData.params.pageNum * goodsData.params.pageSize > goodsData.total) return loadMoreRef.value.changeStatusNoMore()
			})
		}, 300)
	})
	
	onPullDownRefresh(() => {
		refresh()
		setTimeout(function () {
			uni.stopPullDownRefresh()
		}, 1000)
	})
	
	const refresh = () => {
		allChecked.value = false
		goodsData.query.noLoading = false
		goodsData.selection = []
		if(loadMoreRef.value) loadMoreRef.value.changeStatusNoLoading()
		goodsData.params.pageNum = 1
		goodsData.list = []
		goodsList()
	}
	
	const navigateTo = (url:string) => {
		uni.navigateTo({url:url})
	}
</script>

<style lang="scss" scoped>
	.zh-storage-goods {
		padding:150rpx 0;
		.content {
			.tabs {
				padding:0 200rpx;
			}
			.sum-list {
				padding: 0rpx 30rpx;
				font-size: $uni-font-size-26;
				margin: 30rpx 0;
			}
			.section {
				background-color:$uni-bg-card-color;
				padding:30rpx;
				margin-bottom: 20rpx;
				.title {
					.left {
						.tags-right {
							width:53rpx;
							height: 18rpx;
							padding:0 8rpx;
							box-sizing:border-box;
							text-align:center;
							font-size:18rpx;
							line-height:16rpx;
							margin-left: 10rpx;
						}
						.shelve {
							border:1rpx solid #1769FF;
							background-color: #EFF6FF;
							color:#1769FF;
						}
						.no-shelve {
							border:1rpx solid #FF661B;
							background-color:#FFF7EF;
							color:#FF661B;
						}
					}
				}
				.footer {
					border-top: 1rpx solid $uni-border-color;
					padding:10rpx 0;
					margin-top: 30rpx;
					.up-btn {
						width:121rpx;
						height: 52rpx;
						border:1rpx solid #1769FF;
						box-sizing:border-box;
						text-align:center;
						color:#1769FF;
						font-size:24rpx;
						line-height:50rpx;
						margin-left: 10rpx;
						border-radius:6rpx;
					}
					.down-btn {
						width:121rpx;
						height: 52rpx;
						border:1rpx solid #B5B5B5;
						box-sizing:border-box;
						text-align:center;
						color:#302D2D;
						font-size:24rpx;
						line-height:50rpx;
						margin-left: 10rpx;
						border-radius:6rpx;
					}
				}
				
			}
		}
		
		.bottom-fixed {
			padding:20rpx 30rpx;
			.down-all-btn {
				width:225rpx;
				height: 90rpx;
				border:1rpx solid #DCDCDC;
				box-sizing:border-box;
				text-align:center;
				color:#302D2D;
				font-size:30rpx;
				line-height:88rpx;
				border-radius:10rpx;
			}
			.up-all-btn {
				width:225rpx;
				height: 90rpx;
				background: linear-gradient(90deg, #1769FF, #3795FF);
				box-sizing:border-box;
				text-align:center;
				color:#FFF;
				font-size:30rpx;
				line-height:88rpx;
				margin-left: 30rpx;
				border-radius:10rpx;
			}
		}
		
	}
</style>
